<template>
  <div class="com-container">
    <div class="com-chart" ref="stockPie"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      currentIndex: 0,//切换pie图的下标
      allData: null,//服务器返回的数据
      timerId: null,//定时器的销毁
    };
  },
  destroyed() {
    //销毁监听事件以防止内存泄漏
    window.removeEventListener('resize', this.resizeEcharts)
  },
  //vue写方法的钩子
  methods: {
    //初始化echartsInstance对象
    initChart() {
      this.chartInit = this.$echarts.init(this.$refs.stockPie, this.theme);
      //初始化option
      const initOption = {
        title: {
          text: '| 库存销量',
          left: 20,
          top: 20
        }
      }
      this.chartInit.setOption(initOption)
      //鼠标悬停事件
      this.chartInit.on('mouseover', () => {
        clearInterval(this.timerId)
      })
      this.chartInit.on('mouseout', () => {
        this.Interval()
      })
    },
    //获取服务器数据
    async getData() {
      const { data: ret } = await this.$http.get('stock');
      this.allData = ret
      console.log(ret)
      this.updataChart();
      this.Interval()
    },
    //更新图表
    updataChart() {
      // 5个圆环对应的圆心点
      const centerPointers = [
        ['18%', '40%'],
        ['50%', '40%'],
        ['82%', '40%'],
        ['34%', '75%'],
        ['66%', '75%']
      ]
      // 增加5个圆环的渐变颜色范围
      const colorArrs = [
        ['#4FF778', '#0BA82C'],
        ['#E5DD45', '#E8B11C'],
        ['#E8821C', '#E55445'],
        ['#5052EE', '#AB6EE5'],
        ['#23E5E5', '#2E72BF']
      ]
      const statr = this.currentIndex * 5
      const end = (this.currentIndex + 1) * 5
      const stockArr = this.allData.slice(statr, end);//截取数值 0 1 2 3 4
      const seriesArr = stockArr.map((item, index) => {
        return {
          type: 'pie',
          center: centerPointers[index],
          // radius: [110, 100],
          data: [
            {
              name: item.name + 'n\n\n' + item.sales,
              value: item.sales,
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: colorArrs[index][0]
                  },
                  {
                    offset: 1,
                    color: colorArrs[index][1]
                  }
                ])

              }
            }, {
              value: item.stock,
              itemStyle: {
                color: '#333843'
              }
            }
          ],
          label: {
            show: true,
            position: 'center',
            color: colorArrs[index][0]
          },
          labelLine: {
            show: false
          },
          hoverAnimation: false,


        }
      })
      //计算一共多少页
      //添加了数据的option
      const dataOption = {
        series: seriesArr
      }
      this.chartInit.setOption(dataOption)
    },
    //动态适配电脑的分辨率
    resizeEcharts() {
      const titlefontSize = this.$refs.stockPie.offsetWidth / 100 * 4.5;
      const innerRadius = titlefontSize * 2;
      const outterRadius = innerRadius * 1.125;
      const resizeOption = {
        title: {
          textStyle: {
            fontSize: titlefontSize
          },
        },
        series: [
          {
            type:'pie',
            radius: [outterRadius, innerRadius],
            label:{
              fontSize:titlefontSize / 2
            }
          },  {
            type:'pie',
            radius: [outterRadius, innerRadius],
            label:{
              fontSize:titlefontSize / 2
            }
          },  {
            type:'pie',
            radius: [outterRadius, innerRadius],
            label:{
              fontSize:titlefontSize / 2
            }
          },  {
            type:'pie',
            radius: [outterRadius, innerRadius],
            label:{
              fontSize:titlefontSize / 2
            }
          },  {
            type:'pie',
            radius: [outterRadius, innerRadius],
            label:{
              fontSize:titlefontSize / 2
            }
          },

        ]


      }
      this.chartInit.setOption(resizeOption)
      this.chartInit.resize()
    },
    //定时器
    Interval() {
      if (this.timerId) {
        clearInterval(this.timerId)

      }
      this.timerId = setInterval(() => {
        this.currentIndex++
        if (this.currentIndex > 1) {
          this.currentIndex = 0
        }
        this.updataChart()
      }, 2000)
    }
  },
  mounted() {
    this.initChart();
    this.getData(),
      //监听window窗口的大小变化
      window.addEventListener('resize', this.resizeEcharts)
    clearInterval(this.timerId)
    this.resizeEcharts()
  },
   computed: {
    ...mapState(['theme'])

  },
  watch: {
    theme() {
      this.chartInit.dispose()
      this.initChart()
      this.resizeEcharts()
      this.updataChart()
    }
  },
};
</script>

<style lang="less">
</style>